Canvas制作排序算法演示动画

最新推荐文章于 2022-06-07 11:21:18 发布

VIP文章 leeonfield

最新推荐文章于 2022-06-07 11:21:18 发布

阅读量1.7k

点赞数 5

分类专栏：【web】文章标签： html javascript canvas 排序算法 canvas动画

本文链接：https://blog.csdn.net/u013298384/article/details/48230769

版权

Canvas制作排序算法演示动画

Canvas制作排序算法演示动画
- - 实现思路
  - 效果
  - 小结
  - Source code
    - html
    - js
    - css

Tips: 形象化演示排序算法可以让初学者快速理解，比较好的例子：jun-lu的SortAnimate，旧金山大学的David Galles教授的算法演示课件。最近在看canvas，试着用js+canvas自己做了一个。

实现思路

获取输入字符串
- 存入数组S[]中
- 新建一个对象数组Rect[]{ x , y , target_x , target_y , text:S[i]}（注：x , y 是当前坐标，target_x , target_y 是目的坐标，text 记录字符）
排序
- 使用插入排序进行顺序排序，当数值有交换行为时，用track_insert[]记录进行交换的元素在数组中的位置（方便在绘制动画时进行坐标定位）
- 因为我用的是插入排序，属于arr[i]和arr[i+1]进行交换，所以只需要记录i就可以。
绘制
- 图片绘制function Draw(){}
- 图片坐标更新function Update(){}
- 使用setInterval()定时调用Draw()和Update()函数进行页面刷新

效果

初始界面

排序过程

gif演示

小结

做动画都是一个原理，不短刷新更新坐标，擦除，绘制，之前用opencv做的2d的小游戏也是同样的原理。

Source code

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="css/demo.css"/>
    <script type="text/javascript&

最低0.47元/天解锁文章

leeonfield

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Canvas制作排序算法演示动画

Canvas制作排序算法演示动画Canvas制作排序算法演示动画实现思路效果小结Source codehtmljscssTips: 形象化演示排序算法可以让初学者快速理解，比较好的例子：jun-lu的SortAnimate，旧金山大学的David Galles教授的算法演示课件。最近在看canvas，试着用js+canvas自己做了一个。实现思路获取输入字符串存入数组S[]中新
复制链接

扫一扫